<script setup lang="ts">
import PlayButton from "@/components/Controls/PlayButton.vue";
import MusicNextButton from "@/components/Controls/MusicNextButton.vue"
import MusicPrevButton from "@/components/Controls/MusicPrevButton.vue"
import MusicVoice from "@/components/Controls/MusicVoiceButton.vue"
import MusicPlayModeButton from "@/components/Controls/MusicPlayModeButton.vue"
const props = defineProps({
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

</script>

<template>
<div class="controls">
  <MusicPlayModeButton :themeDarkStyle="themeDarkStyle"></MusicPlayModeButton>
  <MusicPrevButton :themeDarkStyle="themeDarkStyle"></MusicPrevButton>
  <PlayButton :themeDarkStyle="themeDarkStyle"></PlayButton>
  <MusicNextButton :themeDarkStyle="themeDarkStyle"></MusicNextButton>
  <MusicVoice :themeDarkStyle="themeDarkStyle"></MusicVoice>
</div>
</template>

<style lang="scss" scoped>
.controls{
  display: flex;
  align-items: center;
  height: 100%;
  div{
    margin-right: 15px;

    &:last-child{
      margin-right: 0;
    }

  }

  svg,img{
    display: flex;
    align-content: center;
  }
}
</style>